<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">

    </ul>
    <script>
        // class语法中也提供了set和get对于属性的赋值与读取操作进行拦截
        class List{
            constructor(el){
                this.el = document.querySelector(el);
            }

            // set和get其实更多的用处就是根据类中已有的属性，去做出一些操作。比如这个案例中，我们需要通过html属性传一个数组，然后将数组经过处理渲染到el这个元素里面去。后面每次对于html属性重新赋值，都会让el里的内容重新渲染。实现了一种响应式
            set html(data){
                this.el.innerHTML = data.map(item=>`<li>${item}</li>`).join('');
                //注意不要在里面想当然的写 this.html = data;因为set本就是对于赋值进行拦截，你这样会再次触发set，然后再次触发this.html = data;就是死循环了，get也是同理，不要写return this.html;
            }

            get html(){
                return this.el.innerHTML;
            }

        }

        let list = new List('.list');
        list.html = ['111','222','333'];
    </script>
</body>
</html>